<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>办理离职</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <link href="/dist/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/dist/plugins/webuploader-0.1.5/webuploader.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=8e9c5bb62">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=66b457d6">

    <style type="text/css">
        td div {
            float: left;
            text-align: center;
            height: 100%;
        }

        .fj {
            cursor: pointer;
            margin-left: 6px;
        }

        .webuploader-pick {
            position: relative;
            display: inline-block;
            cursor: pointer;
            background: none;
            padding: 0;
            color: #74adf2;
            width: 100%;
            text-align: left;
        }

        .rightBorder {
            border-left: 1px solid #e8e8e9;
        }

        .table-detail {
            width: 560px;
            margin: 0 auto;
        }

        .entryTitle {
            font-weight: bold;
            width: 80px;
            background-color: #F5F5F5;
        }
        td  .lookFj{
            color:#74adf2;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            position: relative;
            cursor: pointer;
            background: url(/dist/img/upload_normal.gif) no-repeat 6px center;
            padding-left: 24px !important;
            text-align: left;
        }
        .delfile{
            position: absolute;
            right: 0;
            top: 0;
            width: 15px;
            height: 100%;
            line-height: 24px;
            text-align: center;
            font-size: 14px;
            border-radius: 50%;
            background: #fff;
            z-index: 1111111;
            color: #bbb;
            cursor: pointer;
        }
        .delfile:hover{
            color:red;
        }
        .fujian {
            display: inline-block;
            cursor: pointer;
            padding-left: 38px;
            background: url(/dist/img/fujian.png) no-repeat 20px center;
            color: #2a8cec;
        }
        td textarea,td input{
            color:#2a8cec;
        }
    </style>
</head>
<body>
<iframe id="ifAttach" style="display:none"></iframe>
<section class="content" id="app">
    <div style="overflow: auto;">
        <table class="table-detail">
            <tr>
                <td class="td-module" colspan="4" style="background: yellow;color: black;">离职信息</td>
            </tr>
            <tr>
                <td class="entryTitle">离职日期</td>
                <td><input type="text" v-model="user.leaveDate" @focus="showDatePicker($event,'leaveDate')" placeholder="请选择时间"/>
                </td>
                <td class="entryTitle">离岗日期</td>
                <td><input type="text" v-model="user.leavePostDate" @focus="showDatePicker($event,'leavePostDate')" placeholder="请选择时间"/>
                </td>
            <tr>
                <td class="entryTitle" style="width: 120px;">离职类型</td>
                <td><select v-model="user.leaveType" class="td-value">
                    <option value=0>辞职自动离职</option>
                    <option value=1>辞退</option>
                </select></td>
            <td colspan="2"></td>
            </tr>
            </tr>
            <tr>
                <td class="entryTitle" style="height: 70px;">离职原因</td>
                <td colspan="3"><textarea v-model="user.leaveReason"></textarea></td>

            </tr>
            <tr>
                <td class="entryTitle">审计结果</td>
                <td><div class="lookFj" v-if="user.auditAttachName"  @click="download(user.auditAttachName,user.auditAttachUrl)">
                    {{user.auditAttachName}}
                    <div class="delfile" v-on:click="deleteFile('auditAttach')">x</div>
                </div>
                    <div class="fj fujian" id="auditAttach">上传附件</div></td>

                <td class="entryTitle">离职会签单</td>
                <td> <div class="lookFj" v-if="user.leaveAttachName" @click="download(user.leaveAttachUrl,user.leaveAttachName)">
                    {{user.leaveAttachName}}
                    <div class="delfile" v-on:click="deleteFile('leaveAttach')">x</div>
                </div>
                    <div class="fj fujian" id="leaveAttach">上传附件</div></td>
            </tr>
            <tr>
                <td class="entryTitle">离职说明</td>
                <td>
                    <div class="lookFj" v-if="user.leaveDescAttachName" @click="download(user.leaveDescAttachUrl,user.leaveDescAttachName)">
                        {{user.leaveDescAttachName}}
                        <div class="delfile" v-on:click="deleteFile('leaveDescAttach')">x</div>
                    </div>
                    <div class="fj fujian" id="leaveDescAttach">上传附件</div>
                </td>
                <td class="entryTitle">解除劳动合同协议</td>
                <td>
                    <div class="lookFj" v-if="user.leaveContractAttachName"  @click="download(user.leaveContractAttachUrl,user.leaveContractAttachName)">
                        {{user.leaveContractAttachName}}
                        <div class="delfile" v-on:click="deleteFile('leaveContractAttach')">x</div>
                    </div>
                    <div class="fj fujian" id="leaveContractAttach">上传附件</div>
                </td>
            </tr>
        </table>
    </div>
    <div style="height:30px;line-height:30px;text-align: center;z-index:999;padding-top:5px;">
        <input type="button" value="保存" @click="save()" class="btn oaBtn btn-sm" style="margin-top:5px;">
    </div>
</section>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=0b5caf39"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=fff81c63"></script>
<script type="text/javascript" src="/dist/plugins/select2/select2.min.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script src="/dist/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.exhide-3.5.js"></script>
<script type="text/javascript">
    /*var api = frameElement.api, W = api.opener;*/
    var app = new Vue({
        el: '#app',
        data: {
            pageType: '1',
            editType:$.wyui.page.urlParams.editType,
            user: {
                id: 0,
                userId: $.wyui.page.urlParams.id,
                companyId: $.wyui.page.urlParams.companyId,
                leaveDate: '',
                leavePostDate:'',
                leaveType: '',
                leaveReason: '',
                auditAttachName: '',
                auditAttachUrl: '',
                leaveAttachName: '',
                leaveAttachUrl: '',
                leaveDescAttachName: '',
                leaveDescAttachUrl: '',
                leaveContractAttachName: '',
                leaveContractAttachUrl: ''
            }
        },
        methods: {
            download: function (src,name) {
                downloadFile(attachId,fileName)
                return false;
            },
            showDatePicker: function (e,type) {
                var that = this;
                WdatePicker({
                    onpicked: function (dp) {
                        if(type=="leavePostDate"){
                            that.user.leavePostDate = dp.cal.getNewDateStr();
                        }
                        if(type=="leaveDate"){
                            that.user.leaveDate = dp.cal.getNewDateStr();
                        }
                        return true;
                    },
                    //dateFmt:'yyyy-MM-dd HH:mm'
                });
                $(e.target).blur();
            },
            save: function () {
                var self = this;
                this.user.user={id: $.wyui.page.urlParams.id,
                    jobState:"1"};
                if(self.user.leaveDate==""){
                    alert("请填写离职时间!")
                }else{

                    $.wyui.postMethod(urlConfig.system.user.savaUserQuit, self.user, function (r) {
                        $.wyui.postMethod('/user/lzSendMessage.json', {userId:$.wyui.page.urlParams.id}, function (data){
                           //离职给应收专员发消息
                        },true);
                        $.wyui.postMethod('/bonus/updateBonusMoney.json', {}, function (data){
                            //实时更新人员奖惩金额
                            console.log("修改奖惩成功")
                        },true);
                       /* $.wyui.postMethod('/regionAchivementsService/transferPosCountMoney.json', {userId:self.user.id}, function (data){
                            //实时绩效奖惩金额
                        },true);*/
                        alert("保存成功");
                        if(self.editType){
                            var $iframe = top.findIframeByName("人事管理");
                            $iframe[0].contentWindow.app.getList();
                            var api = frameElement.api, W = api.opener;
                            api.close();
                        }else {
                            var $iframe = top.findIframeByName("组织机构");
                            $iframe[0].contentWindow.refresh();
                            var api = frameElement.api, W = api.opener;
                            api.close();
                        }
                       /* api.close();*/
                    });
                }
            }, deleteFile: function (item) {
                console.log(item)
                this.user[item + "Name"] = "";
                this.user[item + "Url"] = "";
                $("#" + item).show();
            }
        },
        mounted: function () {
            var that = this;
            //初始化上传控件

            $.wyui.postMethod(urlConfig.system.user.getLeaveByUserId, {userId: $.wyui.page.urlParams.id}, function (r) {
                console.log(r.length)
                if (r.length > 0) {
                    that.user = r[0];
                    console.log(that.user)

                    $(".fj").each(function(){
                        var demo=$(this);
                        var name=demo.attr("id");
                        var nameValue=name+"Name";
                        if(that.user[nameValue]!=""){
                            $("#"+name).hide();
                        }
                    })
                } else {
                }

            });
            $(".fj").each(function () {
                var demo = $(this);
                var name = demo.attr("id");
                var nameValue = name + "Name";
                console.log(that.user);

                var uploader = WebUploader.create({
                    // 选完文件后，是否自动上传。
                    auto: true,
                    // swf文件路径
                    swf: "/statics/plugin/webuploader-0.1.5/Uploader.swf",
                    // 文件接收服务端。
                    server: server.fjIp + "/attach/uploadFile.json",
                    // 选择文件的按钮。可选。
                    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                    pick: '#' + demo.attr("id"),
                    duplicate: true
                });

                uploader.on("uploadStart", function () {
                    $("#progress").show();
                });
                uploader.on("uploadComplete", function () {
                    $("#progress").hide();
                });
                // 文件上传成功，给item添加成功class, 用样式标记上传成功。
                uploader.on('uploadSuccess', function (file, response) {
                    console.log(demo);
                    var nameValue = name + "Name";
                    var urlValue = name + "Url";
                    app.user[nameValue] = response.name;
                    app.user[urlValue] = response.url;
                    console.log(app.user)
                    $("#" + name).hide();
                });

                // 文件上传失败，显示上传出错。
                uploader.on('uploadError', function (file) {
                    alert("上传失败！");
                });

            });

        }
    });
</script>
</body>
</html>